@import 'common/config.less';
@import 'common/normalize.less';
@import 'common/common.less';

.midea {

    // common
    &-section {
        position: relative;
        display: none;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
    }

    &-active {
        display: block;
        z-index: 111;
    }

    &-alert {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
        background: rgba(0, 0, 0, .5);
        
        & &-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            padding: 0 rem(30);
            width: rem(500);
            background: #fff;
            border-radius: rem(30);
            font-size: rem(26);
        }

        & &-title {
            height: rem(80);
            line-height: rem(80);
            text-align: center;
            border-bottom: 1px solid #ccc;
        }

        p {
            font-size: rem(24);
            padding: rem(25) 0;
        }

        & &-button {
            text-align: center;
            border-top: 1px solid #ccc;
            height: rem(80);
            line-height: rem(80);
            color: #434343;
        }
    }
    
    // loading
    &-loading {
        background-image: url('../images/back/loading.png');
        
        & &-pig {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: rem(-69) 0 0 rem(-90);
            width: rem(180);
            height: rem(138);
            background: url('../images/loading-pig.png') center no-repeat;
            background-size: cover;
            -webkit-animation: opacitys 3s infinite;
            animation: opacitys 3s infinite;
        }
    }

    // video
    &-video {
        position: relative;
        overflow: hidden;
        background-image: url('../images/back/video.png');
        
        & &-boxes {
            display: flex;
            align-items: center;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: rem(-210);
            width: 100%;
            height: rem(420);
            background: #474747;

            video {
                width: 100%;
                height: 100%;
            }
        }

        &-button {
            position: absolute;
            bottom: rem(100);
            left: 50%;
            margin-left: rem(-144);
            width: rem(288);
            height: rem(66);
            font-size: 0;
            background: url('../images/video-button.png') center no-repeat;
            background-size: cover;
        }
    }

    // mask
    &-mask {
        background-image: url('../images/back/mask.png');

        & &-content {
            position: absolute;
            top: 50%;
            left: 50%;
            width: rem(558);
            height: auto;
            // margin: rem(-400) 0 0 rem(-279);
            transform: translate(-50%,-50%);
            background: #fff8e6;
            border-radius: rem(15);
        }

        &-close {
            position: absolute;
            top: rem(22);
            right: rem(17);
            width: rem(32);
            height: rem(32);
            background: url('../images/close.png') center no-repeat;
            background-size: cover;
        }

        &-item {
            display: none;
            width: 100%;
            height: rem(684);
        }

        &-active {
            display: block;
        }
    }

    // game
    &-game {
        overflow: hidden;
        padding-top: rem(150);
        background-image: url('../images/back/game.png');

        &.midea-active {
            display: flex !important;
            flex-direction: column;
        }
        
        & &-boxes {
            flex: 1;
            padding-top: rem(284);
            height: rem(830rem);
            background: url('../images/game.png') center top no-repeat;
            background-size: 100% 100%;
        }

        & &-group {
            font-size: 0;
            width: rem(558);
            margin: rem(32) auto rem(30);
            overflow: hidden;
            
            .midea-game-button {
                display: inline-block;
                width: rem(255);
                height: rem(66);
                border: 0;
                border-radius: rem(15);
                background: #fff8e6;
                font-size: rem(24);
                color: #c9333c;
            }

            .midea-open-rule {
                margin-right: rem(48);
            }
        }

        & &-tips {
            // display: none;
            color: #fff8e6;
            font-size: rem(24);
            text-align: center;
            padding-bottom: rem(40);
        }
    }

    // rule
    &-rule {
        padding: 0 rem(43);
        height: rem(800);
        color: #c9333c;

        h2 {
            margin: 0;
            padding: rem(58) 0 rem(22);
            border-bottom: 1px dashed #c9333c;
            font-size: rem(46);
            text-align: center;
            letter-spacing: rem(5);
        }

        ul {
            font-size: rem(28);
            padding-top: rem(35);
        }

        li {
            padding-bottom: rem(42);
            line-height: 1.3;
        }

        small {
            display: block;
            padding-top: rem(30);
            font-size: rem(24);
        }
    }

    // gift
    &-gift,
    &-success {
        padding-top: rem(75);

        h2 {
            padding-bottom: rem(40);
            font-size: rem(50);
            text-align: center;
            color: #c9333c;
            margin: 0;
        }

        & &-img {
            width: 100%;
            height: rem(370);
            margin-bottom: rem(27);

            img {
                display: block;
                width: 100%;
                height: 100%;
            }
        }

        & &-button {
            height: rem(66);
            font-size: 0;
            margin: 0 auto;
        }
    }

    &-gift {
        & &-button {
            width: rem(204);
            background: url('../images/game-save.png') center no-repeat;
            background-size: cover;
        }
    }

    &-success {
        & &-button {
            width: rem(255);
            background: url('../images/game-back.png') center no-repeat;
            background-size: cover;
        }
    }

    // card
    &-card {
        padding-top: rem(70);

        h2 {
            margin: 0;
            color: #c9333c;
            font-size: rem(30);
            text-align: center;
        }

        & &-desc {
            margin-top: rem(10);
            margin-bottom: rem(40);
        }

        & &-img {
            width: rem(435);
            height: rem(249);
            margin: 0 auto rem(30);
            
            img {
                display: block;
                width: 100%;
                height: 100%;
            }
        }

        & &-info {
            height: rem(120);
            padding: 0 rem(30);
            text-align: center;
            font-size: rem(28);
            color: #c9333c;

            span {
                padding-top: .5rem;
                display: block;

                em {
                    font-weight: bold;
                    font-size: rem(36);
                    font-style: normal;
                }
            }
        }

        a {
            display: block;
            margin: 0 auto;
            width: rem(204);
            height: rem(66);
            font-size: 0;
            background: url('../images/game-save.png') center no-repeat;
            background-size: cover;
        }
    }

    &-history {
        padding-top: rem(70);

        h2 {
            padding-bottom: rem(50);
            font-size: rem(50);
            text-align: center;
            color: #c9333c;
            margin: 0;
        }
        
        & &-button {
            width: rem(255);
            height: rem(66);
            background: url('../images/game-submit.png') center no-repeat;
            background-size: cover;
            margin: 0 auto;
            font-size: 0;
        }

        ul {
            padding: 0 rem(80) rem(60);
        }

        li {
            display: flex;
            color: #c9333c;
            margin-bottom: rem(20);
            font-size: rem(26);
            
            span {
                flex: 1;
                text-align: left;
            }

            label {
                flex: 2.2;
                text-align: right;
            }
        }
    }

    &-form {
        padding-top: rem(70);

        h2 {
            padding-bottom: rem(20);
            font-size: rem(50);
            text-align: center;
            color: #c9333c;
            margin: 0;

            small {
                display: block;
                text-align: center;
                color: #434343;
                font-size: rem(24);
                font-weight: normal;
                margin-top: rem(20);
            }
        }

        & &-item {
            overflow: hidden;
            height: rem(50);
            padding: 0 rem(97);
            margin-bottom: rem(40);

            label {
                float: left;
                width: rem(100);
                font-size: rem(32);
                color: #c9333c;
                line-height: rem(50);
            }
        }

        & &-control {
            float: right;

            input {
                display: block;
                width: rem(260);
                height: rem(50);
                padding: 0;
                background: rgba(0, 0, 0, 0);
                font-size: rem(24);
                outline: none;
                border: solid #434343;
                border-width: 0 0 1px 0;
            }
        }

        & &-hr {
            height: rem(67);
            border: solid #434343;
            border-width: 1px 0;
            margin: rem(60) rem(97) rem(40);
        }

        & &-button {
            width: rem(255);
            height: rem(66);
            background: url('../images/game-submit.png') center no-repeat;
            background-size: cover;
            margin: 0 auto;
        }
    }
}

#lottery { flex: 1; height: 100%; padding: rem(40) rem(120); }
#lottery table { width: 100%; height: 100%; }
// #lottery table tr { height: 33.33%; }
#lottery table td { position:relative; width: 33.33%; }
#lottery table td a { width: 100%; height: 100%; display:block; text-decoration:none; background: url('../images/btn-cj.png') center no-repeat; background-size: rem(169) rem(134); 
    -webkit-animation: tops 1s infinite; animation: tops 1s infinite; }
#lottery table td a.disabled{ background: url('../images/btn-mt.png') center no-repeat; background-size: rem(169) rem(134); }
#lottery table td a.loading { background: url('../images/lottery.png') center no-repeat; background-size: rem(134); -webkit-animation: opacitys 1.5s infinite; animation: opacitys 1.5s infinite; }
#lottery table td.active .mask{ display:block; }
#lottery table td > div { position: absolute; font-size: rem(28); color: #fff8e6; top: 0; width: 100%; border: 2px solid #fff8e6; height: 100%; border-radius: rem(15); }
#lottery .mask { background: #f59519; display:none; z-index: 12; }
#lottery .back { background: #c9333c; z-index: 11; }
#lottery .gift { z-index: 13; }
#lottery .gift img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

// loading
@keyframes opacitys{
    0%, 100% {
        opacity: .6;
    }
    50% {
        opacity: 1;
    }
}

@keyframes tops{
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0px);
    }
}

